<template>
  <ul class="todoList-wrapper">
    <li class="item" :class="index===activeIndex?'active':''" v-for="(d ,index) in listData" @click="activeIndex=index">
      <el-row>
        <el-col :span="2" class="col"><span class="index">{{index+1}}</span></el-col>
        <el-col :span="12" class="col" style="text-align: left"><span class="title">{{d.title}}</span></el-col>
        <el-col :span="10" class="col" style="text-align: right;padding-right: 15px;"><span class="time">{{d.time}}</span></el-col>
      </el-row>
    </li>
  </ul>
</template>

<script>
    export default {
      name: 'todoList',
      data() {
        return {
          activeIndex: null
        }
      },
      props: {
        listData: {
          type: Array,
          default: function() {
            return [
              { title: '设备油耗(未提交)', time: '2019/02/13 16:46' },
              { title: '设备油耗(未提交)', time: '2019/02/13 16:46' },
              { title: '设备油耗(未提交)', time: '2019/02/13 16:46' },
              { title: '设备油耗(未提交)', time: '2019/02/13 16:46' },
              { title: '设备油耗(未提交)', time: '2019/02/13 16:46' },
              { title: '设备油耗(未提交)', time: '2019/02/13 16:46' }]
          }
        }
      }
    }
</script>

<style scoped>
  .item >>> span{font-size: 12px;transition: all .3s;}
  .item:hover{background: var(--itemActive);}
</style>
<style scoped lang="scss">
  .todoList-wrapper{
    width: 100%;
    .item{
     line-height: 38px;
      position: relative;
      cursor: pointer;
      span:{
        font-size:12px;
        color:#333333FF;
      }
      .time{
        padding-right: 3px ;
      }
     .col{
       text-align: center;

     }
    }
    .item.active{
      background: var(--itemActive);
    }
  }
</style>
